<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    ul {
            color: red;
            height: 400px;
            background: #6ff;
            font-size: 15px;
        }
    </style>
</head>
<body>
</body>
<ul id="box" class="wrap one two" data-id="我是data-id" data-index="0" www="asdasd" style="width:300px">
        1231231
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
    </ul>
<script>
    var box=document.getElementById("box");
    // console.dir(box)   打印box元素的详细信息

    // console.log(box.childNodes)  childNodes元素的子节点
    // console.log(box.children)  children元素的元素子节点
 
    // console.log(box.id) 元素id名
    // console.log(box.className)元素class名
    // console.log(box.classList)元素class名数组形式

    // console.log(box.firstChild)元素的第一个节点
    // console.log(box.firstElementChild)元素的第一个元素节点

    // console.log(box.parentElement)元素的父元素
    // console.log(box.parentNode)元素的父节点(也是元素)

    // console.log(box.style)元素的行内样式
    // console.log(window.getComputedStyle(box))元素的所有最终展现的样式
    // console.log(box.currentStyle)(ie8以下用这种样式)

    // getComputedStyle兼容写法的封装
    // function getStyleAttr(ele, attr) {
    //     if (window.getComputedStyle) { //此方法  低版本ie没有
    //         // window.getComputedStyle(ele)."width"   语法不允许
    //         // window.getComputedStyle(ele)["width"] // 语法允许
    //         return window.getComputedStyle(ele)[attr];
    //     } else {
    //         return ele.currentStyle[attr];
    //     }
    // }

    // dateset  用来获取data-系列的数据 (H5新增 data-*是可以用来存储数据的，data-的后面紧跟自己起的一个变量名，然后后面赋予一个值  data-id="0")
    // console.log(box.dataset.id)用dateset设置的属性和属性值
    // console.log(box.dataset)
    // console.log(box.getAttribute("data-id"))

    // 同级元素查找 
    // var first=document.getElementsByTagName("li")[0];
    // console.log(first)
    // console.log(first.nextSibling)
    // console.log(first.nextElementSibling)
    // console.log(first.previousSibling)
    // console.log(first.previousElementSibling)

    // previous的封装
    // function previous(ele){
    //     if(ele.previousElementSibling){
    //         return ele.previousElementSibling;
    //     }else{
    //         return ele.previousSibling; // 低版本ie  没有文本节点的概念
    //     }
    // }

    // 父级元素操控子级元素的增删改

    // 1.创建一个元素(同一个元素只能插入一次，前面的后面的覆盖)    
    // var span=document.createElement("span")//创建元素节点
    // span.innerHTML="123456"
    // var text=document.createTextNode("hello")//创建文本节点
    // box.appendChild(span)
    // document.getElementsByTagName("li")[0].appendChild(span)

    // 2.插入元素
    // box.appendChild(span)
    // box.insertBefore(span,document.getElementsByTagName("li")[1])

    // 3.更改元素
    // box.replaceChild(span,document.getElementsByTagName("li")[1])
    // box.replaceWith(span,document.getElementsByTagName("li")[2])(有bug)

    //  4.删除元素 
    // box.removeChild(document.getElementsByTagName("li")[1])
    // document.getElementsByTagName("li")[1].remove()

    // 元素克隆
    // var first=document.getElementsByTagName("li")[0]
    // var new_node=first.cloneNode(true);(false只克隆自己和属性，true克隆自己和子孙节点)
    // box.appendChild(new_node)
</script> 
</html>